<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <script>
      console.log('1')
      setTimeout(() => {
        console.log('2')
      }, 0)
      console.log('3')
    </script> -->

    <button>测试xhr是异步函数</button>
    <script>
      //   document.querySelector('button').addEventListener('click', function () {
      //     console.log('1')

      //     const xhr = new XMLHttpRequest()
      //     xhr.open('post', 'http://ajax-api.itheima.net/api/login')
      //     xhr.setRequestHeader('content-type', 'application/json')

      //     xhr.addEventListener('load', function () {
      //       //   console.log(xhr.response)
      //       //   console.log(JSON.parse(xhr.response))
      //       console.log('2')
      //     })
      //     let obj = {
      //       username: 'admin',
      //       password: '123456',
      //     }
      //     xhr.send(JSON.stringify(obj))

      //     console.log('3')
      //   })
    </script>
    <!-- <script>
      setTimeout(() => {
        console.log(1)
        setTimeout(() => {
          console.log(2)
          setTimeout(() => {
            console.log(3)
            setTimeout(() => {
              console.log(3)
              setTimeout(() => {
                console.log(3)
              }, 3000)
            }, 3000)
          }, 3000)
        }, 2000)
      }, 1000)
    </script> -->

    <script>
      const xhr1 = new XMLHttpRequest()
      xhr1.open('post', 'http://ajax-api.itheima.net/api/login')
      xhr1.setRequestHeader('content-type', 'application/json')

      xhr1.addEventListener('load', function () {
        console.log(xhr.response)
        const xhr2 = new XMLHttpRequest()
        xhr2.open('post', 'http://ajax-api.itheima.net/api/login')
        xhr2.setRequestHeader('content-type', 'application/json')

        xhr2.addEventListener('load', function () {
          //   console.log(xhr.response)
          //   console.log(JSON.parse(xhr.response))
          console.log('2')
          const xhr3 = new XMLHttpRequest()
          xhr3.open('post', 'http://ajax-api.itheima.net/api/login')
          xhr3.setRequestHeader('content-type', 'application/json')

          xhr3.addEventListener('load', function () {
            //   console.log(xhr.response)
            //   console.log(JSON.parse(xhr.response))
            console.log('2')
          })
          let obj = {
            username: 'admin',
            password: '123456',
          }
          xhr3.send(JSON.stringify(obj))
        })
        let obj = {
          username: 'admin',
          password: '123456',
        }
        xhr2.send(JSON.stringify(obj))
      })
      let obj = {
        username: 'admin',
        password: '123456',
      }
      xhr1.send(JSON.stringify(obj))
    </script>
  </body>
</html>